<template>
  <div class="forms">
    <el-button type="primary" class="addButton" @click="addButton"
      >添加</el-button
    >
    <el-dialog :title="title" :visible.sync="dialog.isShowDialog" width="50%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="所属角色" prop="roleid">
          <el-select v-model="ruleForm.roleid" placeholder="请选择" clearable>
            <el-option
              :label="item.rolename"
              :value="item.id"
              v-for="item in roleListData"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch
            :active-value="1"
            :inactive-value="2"
            inactive-color="#ff4949"
            v-model="ruleForm.status"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.isShowDialog = false">取 消</el-button>
        <el-button type="primary" @click="addUser" v-if="uid == ''"
          >确 定</el-button
        >
        <el-button type="primary" @click="editUser" v-else>确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getUserAdd,
  getUserInfo,
  getUserEdit,
} from "../../../request/api";
import {mapGetters,mapActions} from 'vuex'
export default {
  props: ["dialog"],
  // 添加表单数据
  data() {
    return {
      uid: "",
      title: "",
      ruleForm: {
        roleid: "", //角色编号
        username: "", //管理员名称
        password: "", //密码
        status: 1, //状态1正常2禁用
      },
      // 验证规则
      rules: {
        username: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          { min: 2, max: 7, message: "长度在 2 到 7 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 重置表单数据
    resetFiled() {
      this.ruleForm = {
        roleid: "", //角色编号
        username: "", //管理员名称
        password: "", //密码
        status: 1, //状态1正常2禁用
      };
    },
    // 重置
    resetForm() {
      // 隐藏对话框
      this.dialog.isShowDialog = false;
      // 重置表单
      this.resetFiled();
      // // 刷新数据列表
      this.$emit("refreshList");
    },
    addButton() {
      this.uid = "";
      this.title = "添加管理员";
      // 重置表单
      this.resetFiled();
      this.dialog.isShowDialog = true;
    },
    // 添加管理员
    addUser() {
      getUserAdd(this.ruleForm).then(
        (res) => {
          if (res.data.code == 200) {
            this.$message.success("添加成功");
            // 重置
            this.resetForm();
          }
        },
        (err) => err
      );
    },
    // 获取一条管理员信息
    getOneRoleData(uid) {
      this.uid = uid;
      this.title = "编辑管理员";
      getUserInfo({ uid }).then(
        (res) => {
          if (res.data.code == 200) {
            this.ruleForm = res.data.list;
            this.dialog.isShowDialog = true;
          }
        },
        (err) => err
      );
    },
    // 编辑管理员
    editUser() {
      let obj = {
        uid: this.uid,
        ...this.ruleForm,
      };
      getUserEdit(obj).then(
        (res) => {
          if (res.data.code == 200) {
            this.$message.success("编辑成功");
            // 重置
            this.resetForm();
          }
        },
        (err) => err
      );
    },
    // 获取角色列表数据
    ...mapActions({getRoleListData:"Role/getRoleListData"})
  },
  computed:{
    // 导出角色列表数据
    ...mapGetters({roleListData:"Role/roleListData"})
  },
  mounted() {
    this.getRoleListData()
  },
};
</script>

<style scoped>
.addButton {
  margin-right: 1200px;
  margin-bottom: 20px;
}
</style>